<template>
    <view>
        <!-- d:\applet\byteApplet\dy-wallpaper-applet-2\pages\creator\wallpaper\wallpaper.ttml -->

        <view class="cu-list grid col-4 no-border guoshao-view" style="padding: 10px 8px;">
            <view :class="'guoshao-item cu-item ' + (select == 0 ? 'select' : '')" data-index="0" @click.stop.prevent="activeClick">
                <text :class="select == 0 ? 'text' : 'notext'">全部</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 2 ? 'select' : '')" data-index="2" @click.stop.prevent="activeClick">
                <text :class="select == 2 ? 'text' : 'notext'">已通过</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 1 ? 'select' : '')" data-index="1" @click.stop.prevent="activeClick">
                <text :class="select == 1 ? 'text' : 'notext'">审核中</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 3 ? 'select' : '')" data-index="3" @click.stop.prevent="activeClick">
                <text :class="select == 3 ? 'text' : 'notext'">未通过</text>
            </view>
        </view>

        <scroll-view scroll-x class="bg-white nav tab-view" scroll-with-animation :scroll-left="scrollLeft">
          
            <view
                :class="'cu-item ' + (id == item.id ? 'text-blue cur' : '')"
				v-for="(item,index) in clist"
                :key="index"
                :data-id="item.id"
                @click.stop.prevent="tabSelect"
                :data-classtype="item.classType"
            >
                {{ item.name }}
            </view>
           
        </scroll-view>

        <view class="container">
            <view class="list-box data-v-0034d6f4">
                <block v-for="(item,index) in postsLast" :key="index">
                    <block v-if="classType == 1">
						
						<view>
							<view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerDetailClick"
							></image>
							
							<view class="guoshao-view-my">
								<text class="cuIcon-down text-white guoshao-down"></text>
								<text class="guoshao-down-count">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe" v-if="item.status == 3"></text>
							</view>
						</view>
                    </block>
                    <block v-if="classType == 2">
						<view>
							 <view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
							 	置顶
							 </view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerDetailClick"
							></image>
							
							<view class="guoshao-view-my">
								<text class="cuIcon-down text-white guoshao-down"></text>
								<text class="guoshao-down-count">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe" v-if="item.status == 3"></text>
							</view>
						</view>
                    </block>
                    <block v-if="classType == 3">
						<view>							
							<view class='cu-tag radius bg-cyan guoshao-tags-3' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="background-image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-3">
								<text class="cuIcon-down text-white guoshao-down-3"></text>
								<text class="guoshao-down-count-3">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-3" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-3" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-3" v-if="item.status == 3"></text>
							</view>
						</view>
							
                    </block>
                    <block v-if="classType == 4">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-4">
								<text class="cuIcon-down text-white guoshao-down-4"></text>
								<text class="guoshao-down-count-4">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-4" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-4" v-if="item.status == 3"></text>
							</view>
						</view>
                    </block>
                    <block v-if="classType == 5">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-4">
								<text class="cuIcon-down text-white guoshao-down-4"></text>
								<text class="guoshao-down-count-4">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-4" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-4" v-if="item.status == 3"></text>
							</view>
						</view>
                    </block>
                </block>
            </view>

            <!--加载loadding-->
            <tui-loadmore :visible="loaddingLast"></tui-loadmore>
            <tui-nomore :visible="!pullUpOnLast"></tui-nomore>
            <!--加载loadding-->
        </view>
		<!--
		<view class="padding flex flex-wrap justify-between align-center box guoshao-delete">
			<button class="cu-btn round guoshao-bianji">编辑</button>
		</view>
		-->
    </view>
</template>

<script>
import tuiLoading from '../../../components/loading/loading';
import tuiLoadmore from '../../../components/loadmore/loadmore';
import tuiNomore from '../../../components/nomore/nomore';

const http = require('../../../utils/http.js');

const Constants = require('../../../utils/constants');

export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore
    },
    data() {
        return {
            classType: 0,
            select: 0,
            id: 0,
            scrollLeft: 0,
            clist: [],
            pageNum: 1,
            loaddingLast: false,
            postsLast: [],
            pullUpOnLast: true,
			pageRefresh: 0,
        };
    },
    onLoad: function (options) {
    },
	onShow:function(){
		if(this.pageRefresh == 0){
			this.classifiList();
			this.pageRefresh = 1;
		 }
		
	},
    onPullDownRefresh: function () {},
    onReachBottom: function () {
        if (!this.pullUpOnLast) {
            return;
        }

        this.loadPostLast(false);
    },
    methods: {
        activeClick: function (e) {
            let index = e.currentTarget.dataset.index;

            if (this.select == index) {
                return false;
            }

            this.setData({
                select: index
            });
            this.setData({
                pageNum: 1
            });
            this.loadPostLast(true);
        },

        /**
         * 分类
         */
        tabSelect: function (e) {
            let id = e.currentTarget.dataset.id;
            let classType = e.currentTarget.dataset.classtype;

            if (this.id == id) {
                return false;
            }

            this.setData({
                id: id,
                classType: classType ,//scrollLeft : (e.currentTarget.dataset.id - 1) * 60
				pageNum: 1
            });
            this.loadPostLast(true);
        },

        classifiList: function () {
            let that = this;
            var params = {
                url: '/classification/classifiList',
                method: 'GET',
                data: {},
                callBack: function (res) {
                    that.setData({
                        clist: res.data,
                        classType: res.data.length > 0 ? res.data[0].classType : 0,
                        id: res.data.length > 0 ? res.data[0].id : 0
                    });
                    that.loadPostLast(true);
                }
            };
            http.request(params);
        },

        //加载数据
        loadPostLast: function (refresh) {
            let that = this;
            if (!refresh) {
                let page = ++that.pageNum;
                that.setData({
                    loaddingLast: true,
                    pageNum: page
                });
            } //加载分类图片  begin

            uni.showLoading({
                title: '加载中',
                // 内容
                success: (res) => {},
                fail: (res) => {}
            });
            var params = {
                url: '/u/my/selectMyWallpaper',
                method: 'GET',
                data: {
                    pageNum: that.pageNum,
                    pageSize: Constants.JQ_PER_PAGE_COUNT,
                    order: 4,
                    classId: that.id == 0 ? '' : that.id,
                    status: that.select == 0 ? '' : that.select
                },
                callBack: function (res) {
                    that.setData({
                        loaddingLast: false,
                        postsLast: refresh ? res.data.list : that.postsLast.concat(res.data.list),
                        pullUpOnLast: !res.data.isLastPage ? true : false
                    });
                    uni.hideLoading();
                }
            };
            http.request(params); // 加载分类 end
        },

        handlerDetailClick(e) {
			let select = this.select;
			let classId = this.id;
			let id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url:"/pages/creator/detail/detail?id="+id+"&select="+select+"&classId="+classId,
				success:res =>{},
				fail:() =>{},
				complete:() => {}
			});
        }
    }
};
</script>
<style>
@import './wallpaper.css';
</style>
